<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册账号 - 1024导航</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        accent: '#F59E0B',
                        dark: '#1F2937',
                        light: '#F9FAFB'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-hover {
                @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
            }
            .text-gradient {
                @apply bg-clip-text text-transparent bg-gradient-to-r from-primary to-secondary;
            }
            .input-focus {
                @apply focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary;
            }
            .password-strength-0 {
                @apply bg-gray-200;
            }
            .password-strength-1 {
                @apply bg-red-500;
            }
            .password-strength-2 {
                @apply bg-orange-500;
            }
            .password-strength-3 {
                @apply bg-yellow-500;
            }
            .password-strength-4 {
                @apply bg-green-500;
            }
        }
    </style>
</head>

<body class="bg-gray-50 font-sans text-gray-800 min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="sticky top-0 z-50 bg-white shadow-sm transition-all duration-300">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <div class="text-primary text-2xl font-bold">1024<span class="text-secondary">导航</span></div>
                <span class="hidden md:inline-block text-sm text-gray-500 bg-gray-100 px-2 py-1 rounded">v2.3</span>
            </div>

            <nav class="hidden md:flex items-center space-x-6">
                <a href="index.html" class="text-gray-600 hover:text-primary transition-colors">首页</a>
                <a href="resources.html" class="text-gray-600 hover:text-primary transition-colors">资源</a>
                <a href="tools.html" class="text-gray-600 hover:text-primary transition-colors">工具</a>
                <a href="community.html" class="text-gray-600 hover:text-primary transition-colors">社区</a>
                <a href="about.html" class="text-gray-600 hover:text-primary transition-colors">关于</a>
            </nav>

            <div class="flex items-center space-x-3">
                <button class="md:hidden text-gray-600 text-xl">
                    <i class="fa fa-bars"></i>
                </button>
            </div>
        </div>
    </header>

    <!-- 注册区域 -->
    <section class="flex-grow py-12">
        <div class="container mx-auto px-4">
            <div class="max-w-md mx-auto">
                <div class="text-center mb-8">
                    <h1 class="text-[clamp(1.5rem,4vw,2rem)] font-bold mb-2 text-gradient">创建账号</h1>
                    <p class="text-gray-600">注册后即可享受个性化收藏、资源推荐等专属服务</p>
                </div>

                <div class="bg-white rounded-xl shadow-sm p-6 md:p-8 card-hover">
                    <!-- 注册表单 -->
                    <form id="registerForm" class="space-y-5">
                        <div>
                            <label for="username" class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
                            <div class="relative">
                                <div
                                    class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
                                    <i class="fa fa-user"></i>
                                </div>
                                <input type="text" id="username" placeholder="请设置您的用户名"
                                    class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg input-focus transition-all">
                                <div id="usernameCheck"
                                    class="hidden absolute inset-y-0 right-0 pr-3 flex items-center">
                                    <i class="fa fa-check-circle text-green-500"></i>
                                </div>
                            </div>
                            <p id="usernameHint" class="mt-1 text-xs text-gray-500 hidden">用户名可用</p>
                        </div>

                        <div>
                            <label for="registerEmail" class="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
                            <div class="relative">
                                <div
                                    class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
                                    <i class="fa fa-envelope"></i>
                                </div>
                                <input type="email" id="registerEmail" placeholder="请输入您的邮箱"
                                    class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg input-focus transition-all">
                            </div>
                            <p class="mt-1 text-xs text-gray-500">我们将发送验证邮件到该邮箱</p>
                        </div>

                        <div>
                            <label for="registerPassword"
                                class="block text-sm font-medium text-gray-700 mb-1">设置密码</label>
                            <div class="relative">
                                <div
                                    class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
                                    <i class="fa fa-lock"></i>
                                </div>
                                <input type="password" id="registerPassword" placeholder="请设置密码（至少8位）"
                                    class="w-full pl-10 pr-10 py-3 border border-gray-300 rounded-lg input-focus transition-all">
                                <button type="button" id="toggleRegisterPassword"
                                    class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600">
                                    <i class="fa fa-eye-slash"></i>
                                </button>
                            </div>

                            <!-- 密码强度指示器 -->
                            <div class="mt-2">
                                <div class="flex space-x-1 h-1.5">
                                    <div id="strength1"
                                        class="flex-1 rounded-full password-strength-0 transition-colors"></div>
                                    <div id="strength2"
                                        class="flex-1 rounded-full password-strength-0 transition-colors"></div>
                                    <div id="strength3"
                                        class="flex-1 rounded-full password-strength-0 transition-colors"></div>
                                    <div id="strength4"
                                        class="flex-1 rounded-full password-strength-0 transition-colors"></div>
                                </div>
                                <p id="strengthText" class="mt-1 text-xs text-gray-500">密码强度：弱</p>
                            </div>
                        </div>

                        <div>
                            <label for="confirmPassword"
                                class="block text-sm font-medium text-gray-700 mb-1">确认密码</label>
                            <div class="relative">
                                <div
                                    class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
                                    <i class="fa fa-lock"></i>
                                </div>
                                <input type="password" id="confirmPassword" placeholder="请再次输入密码"
                                    class="w-full pl-10 pr-10 py-3 border border-gray-300 rounded-lg input-focus transition-all">
                                <div id="passwordMatch"
                                    class="hidden absolute inset-y-0 right-0 pr-3 flex items-center">
                                    <i class="fa fa-check-circle text-green-500"></i>
                                </div>
                                <div id="passwordMismatch"
                                    class="hidden absolute inset-y-0 right-0 pr-3 flex items-center">
                                    <i class="fa fa-times-circle text-red-500"></i>
                                </div>
                            </div>
                            <p id="passwordHint" class="mt-1 text-xs text-gray-500 hidden"></p>
                        </div>

                        <div class="flex items-start">
                            <input type="checkbox" id="agreeTerms"
                                class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded mt-1">
                            <label for="agreeTerms" class="ml-2 block text-sm text-gray-700">
                                我已阅读并同意<a href="#" class="text-primary hover:underline">服务条款</a>和<a href="#"
                                    class="text-primary hover:underline">隐私政策</a>
                            </label>
                        </div>

                        <button type="submit"
                            class="w-full px-4 py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors font-medium text-base flex items-center justify-center"
                            disabled>
                            <i class="fa fa-user-plus mr-2"></i> 注册账号
                        </button>
                    </form>

                    <!-- 分隔线 -->
                    <div class="my-6 flex items-center">
                        <div class="flex-grow border-t border-gray-200"></div>
                        <span class="px-3 text-sm text-gray-500">或使用以下方式注册</span>
                        <div class="flex-grow border-t border-gray-200"></div>
                    </div>

                    <!-- 社交注册 -->
                    <div class="grid grid-cols-3 gap-3">
                        <button
                            class="flex items-center justify-center py-2.5 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors text-gray-700">
                            <i class="fa fa-github text-xl"></i>
                        </button>
                        <button
                            class="flex items-center justify-center py-2.5 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors text-gray-700">
                            <i class="fa fa-google text-xl"></i>
                        </button>
                        <button
                            class="flex items-center justify-center py-2.5 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors text-gray-700">
                            <i class="fa fa-weixin text-xl"></i>
                        </button>
                    </div>

                    <!-- 登录链接 -->
                    <div class="mt-8 text-center">
                        <p class="text-gray-600">已有账号？
                            <a href="login.html" class="text-primary font-medium hover:underline ml-1">立即登录</a>
                        </p>
                    </div>
                </div>

                <!-- 安全提示 -->
                <div class="mt-6 bg-blue-50 border border-blue-100 rounded-lg p-4 text-sm text-blue-700">
                    <div class="flex items-start">
                        <i class="fa fa-info-circle mt-0.5 mr-2"></i>
                        <p>注册即表示您同意我们根据<a href="#" class="underline">隐私政策</a>处理您的个人信息，我们将保护您的账号安全。</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 底部区域 -->
    <footer class="bg-gray-800 text-gray-300 py-10">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <h3 class="text-white text-lg font-semibold mb-4">1024导航</h3>
                    <p class="text-sm text-gray-400 mb-4">精选互联网优质资源，打造高效便捷的导航平台，助力你的工作与学习。</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-github text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-twitter text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-weixin text-xl"></i>
                        </a>
                    </div>
                </div>

                <div>
                    <h3 class="text-white font-medium mb-4">快速链接</h3>
                    <ul class="space-y-2 text-sm">
                        <li><a href="index.html" class="text-gray-400 hover:text-white transition-colors">首页</a></li>
                        <li><a href="resources.html" class="text-gray-400 hover:text-white transition-colors">资源分类</a>
                        </li>
                        <li><a href="tools.html" class="text-gray-400 hover:text-white transition-colors">实用工具</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">最新收录</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">热门推荐</a></li>
                    </ul>
                </div>

                <div>
                    <h3 class="text-white font-medium mb-4">帮助支持</h3>
                    <ul class="space-y-2 text-sm">
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">使用指南</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">资源提交</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">常见问题</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">联系我们</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">举报不良信息</a></li>
                    </ul>
                </div>

                <div>
                    <h3 class="text-white font-medium mb-4">关于我们</h3>
                    <ul class="space-y-2 text-sm">
                        <li><a href="about.html" class="text-gray-400 hover:text-white transition-colors">网站介绍</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">隐私政策</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">使用条款</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">免责声明</a></li>
                    </ul>
                </div>
            </div>

            <div class="border-t border-gray-700 mt-8 pt-6 text-center text-sm text-gray-500">
                <p>© 2023 1024导航. 本站资源仅供学习交流使用，如有侵权请联系删除。</p>
            </div>
        </div>
    </footer>

    <!-- 回到顶部按钮 -->
    <button id="backToTop"
        class="fixed bottom-6 right-6 w-12 h-12 rounded-full bg-primary text-white shadow-lg flex items-center justify-center opacity-0 invisible transition-all duration-300">
        <i class="fa fa-arrow-up"></i>
    </button>

    <script>
        // 密码显示/隐藏功能
        const toggleRegisterPassword = document.getElementById('toggleRegisterPassword');
        const registerPassword = document.getElementById('registerPassword');

        toggleRegisterPassword.addEventListener('click', () => {
            const type = registerPassword.getAttribute('type') === 'password' ? 'text' : 'password';
            registerPassword.setAttribute('type', type);

            // 切换图标
            toggleRegisterPassword.querySelector('i').classList.toggle('fa-eye');
            toggleRegisterPassword.querySelector('i').classList.toggle('fa-eye-slash');
        });

        // 密码强度检测
        const passwordInput = document.getElementById('registerPassword');
        const strength1 = document.getElementById('strength1');
        const strength2 = document.getElementById('strength2');
        const strength3 = document.getElementById('strength3');
        const strength4 = document.getElementById('strength4');
        const strengthText = document.getElementById('strengthText');

        passwordInput.addEventListener('input', () => {
            const password = passwordInput.value;
            let strength = 0;

            // 基础长度检查
            if (password.length >= 8) strength++;
            // 包含小写字母
            if (password.match(/[a-z]/)) strength++;
            // 包含大写字母
            if (password.match(/[A-Z]/)) strength++;
            // 包含数字或特殊字符
            if (password.match(/[0-9]|[\W_]/)) strength++;

            // 更新强度指示器
            resetStrength();
            if (strength >= 1) strength1.classList.add(`password-strength-${strength}`);
            if (strength >= 2) strength2.classList.add(`password-strength-${strength}`);
            if (strength >= 3) strength3.classList.add(`password-strength-${strength}`);
            if (strength >= 4) strength4.classList.add(`password-strength-${strength}`);

            // 更新强度文本
            const strengthLabels = ['弱', '中', '良好', '强', '极强'];
            strengthText.textContent = `密码强度：${strengthLabels[strength]}`;

            // 检查密码匹配
            checkPasswordMatch();
            updateSubmitButton();
        });

        function resetStrength() {
            strength1.className = 'flex-1 rounded-full password-strength-0 transition-colors';
            strength2.className = 'flex-1 rounded-full password-strength-0 transition-colors';
            strength3.className = 'flex-1 rounded-full password-strength-0 transition-colors';
            strength4.className = 'flex-1 rounded-full password-strength-0 transition-colors';
        }

        // 密码匹配检查
        const confirmPassword = document.getElementById('confirmPassword');
        const passwordMatch = document.getElementById('passwordMatch');
        const passwordMismatch = document.getElementById('passwordMismatch');
        const passwordHint = document.getElementById('passwordHint');

        confirmPassword.addEventListener('input', () => {
            checkPasswordMatch();
            updateSubmitButton();
        });

        function checkPasswordMatch() {
            const password = registerPassword.value;
            const confirm = confirmPassword.value;

            if (confirm === '') {
                passwordMatch.classList.add('hidden');
                passwordMismatch.classList.add('hidden');
                passwordHint.classList.add('hidden');
            } else if (password === confirm && password !== '') {
                passwordMatch.classList.remove('hidden');
                passwordMismatch.classList.add('hidden');
                passwordHint.textContent = '密码匹配';
                passwordHint.classList.remove('hidden');
                passwordHint.className = 'mt-1 text-xs text-green-500';
            } else {
                passwordMatch.classList.add('hidden');
                passwordMismatch.classList.remove('hidden');
                passwordHint.textContent = '两次输入的密码不匹配';
                passwordHint.classList.remove('hidden');
                passwordHint.className = 'mt-1 text-xs text-red-500';
            }
        }

        // 用户名检查
        const usernameInput = document.getElementById('username');
        const usernameCheck = document.getElementById('usernameCheck');
        const usernameHint = document.getElementById('usernameHint');

        usernameInput.addEventListener('input', () => {
            const username = usernameInput.value.trim();

            if (username.length >= 3) {
                // 模拟用户名检查
                usernameCheck.classList.remove('hidden');
                usernameHint.textContent = '用户名可用';
                usernameHint.classList.remove('hidden');
                usernameHint.className = 'mt-1 text-xs text-green-500';
            } else {
                usernameCheck.classList.add('hidden');
                if (username.length > 0) {
                    usernameHint.textContent = '用户名至少3个字符';
                    usernameHint.classList.remove('hidden');
                    usernameHint.className = 'mt-1 text-xs text-red-500';
                } else {
                    usernameHint.classList.add('hidden');
                }
            }

            updateSubmitButton();
        });

        // 同意条款检查
        const agreeTerms = document.getElementById('agreeTerms');
        agreeTerms.addEventListener('change', updateSubmitButton);

        // 更新提交按钮状态
        function updateSubmitButton() {
            const submitButton = document.querySelector('#registerForm button[type="submit"]');
            const username = usernameInput.value.trim();
            const email = document.getElementById('registerEmail').value.trim();
            const password = registerPassword.value;
            const confirm = confirmPassword.value;
            const termsAgreed = agreeTerms.checked;

            // 简单验证条件
            const isUsernameValid = username.length >= 3;
            const isEmailValid = email.includes('@') && email.includes('.');
            const isPasswordValid = password.length >= 8;
            const isConfirmValid = password === confirm && confirm !== '';

            // 所有条件满足时启用按钮
            if (isUsernameValid && isEmailValid && isPasswordValid && isConfirmValid && termsAgreed) {
                submitButton.removeAttribute('disabled');
                submitButton.classList.add('hover:bg-primary/90');
            } else {
                submitButton.setAttribute('disabled', 'true');
                submitButton.classList.remove('hover:bg-primary/90');
            }
        }

        // 注册表单提交处理
        const registerForm = document.getElementById('registerForm');

        registerForm.addEventListener('submit', (e) => {
            e.preventDefault();

            const username = document.getElementById('username').value.trim();
            const email = document.getElementById('registerEmail').value.trim();
            const password = registerPassword.value;

            // 模拟注册请求
            alert(`注册信息：\n用户名：${username}\n邮箱：${email}\n密码：${password}\n\n在实际应用中，这里会发送注册请求到服务器并发送验证邮件`);

            // 模拟注册成功后跳转到登录页
            window.location.href = 'login.html';
        });

        // 导航栏滚动效果
        const header = document.querySelector('header');
        window.addEventListener('scroll', () => {
            if (window.scrollY > 50) {
                header.classList.add('py-2', 'shadow');
                header.classList.remove('py-3', 'shadow-sm');
            } else {
                header.classList.add('py-3', 'shadow-sm');
                header.classList.remove('py-2', 'shadow');
            }

            // 回到顶部按钮显示/隐藏
            const backToTopBtn = document.getElementById('backToTop');
            if (window.scrollY > 300) {
                backToTopBtn.classList.remove('opacity-0', 'invisible');
                backToTopBtn.classList.add('opacity-100', 'visible');
            } else {
                backToTopBtn.classList.add('opacity-0', 'invisible');
                backToTopBtn.classList.remove('opacity-100', 'visible');
            }
        });

        // 回到顶部功能
        document.getElementById('backToTop').addEventListener('click', () => {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });
    </script>
</body>

</html>